<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>小普马桶</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-top">
    <a class="aui-pull-left aui-btn goBack" >
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">订单详情</div>
</header>
<section id="app">
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        收货地址:
                        <input type="text"   v-model="submitInfo.address">
                    </div>
                    <div class="aui-list-item-right" v-on:click="goAddRegion()">
                        <i  class="aui-iconfont aui-icon-right"></i>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="aui-flex-row">
        <div class="aui-flex-item-12 aui-margin-l-15">
            <p class="aui-flex-item-2 aui-margin-r-10"><img src="../../images/1.png" alt=""></p>
            <p class="aui-flex-item-2"><img src="../../images/1.png" alt=""></p>
        </div>
        <div class="aui-flex-item-3 aui-flex-offset-9">
            <i class="aui-iconfont aui-icon-right"></i>
            共 <span>2</span>件
        </div>
    </div>

    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        商品金额
                    </div>
                    <div class="aui-list-item-right">
                        ￥<span>49.90</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        运费
                    </div>
                    <div class="aui-list-item-right">
                        ￥ <span>0.00</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        选填:
                        <input type="text" placeholder="给商家留言" v-model="submitInfo.massage">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <p class="aui-margin-l-15">支付方式</p>
    <div class="aui-flex-item-12">
        <div class="aui-flex-col">
            <div class="aui-flex-item-2 aui-padded-10" style="position: relative;">
                <img src="../../images/1.png" class="aui-img-round aui-list-img-sm">
            </div>
            <div class="aui-flex-item-8 aui-padded-10 wxzf">
                <h5 class="aui-text-success">微信支付</h5>
            </div>
            <div class="aui-flex-item-2 aui-padded-10 ">
                <label><input class="aui-radio" type="radio" name="payType" checked> </label>
            </div>
        </div>
    </div>
    <div class="aui-flex-item-12">
        <div class="aui-flex-col">
            <div class="aui-flex-item-2 aui-padded-10" style="position: relative;">
                <img src="../../images/1.png" class="aui-img-round aui-list-img-sm">
            </div>
            <div class="aui-flex-item-8 aui-padded-10 wxzf">
                <h5 class="aui-text-success">支付宝</h5>
            </div>
            <div class="aui-flex-item-2 aui-padded-10 ">
                <label><input class="aui-radio" type="radio" name="payType" > </label>
            </div>
        </div>
    </div>

    <footer class="aui-bar aui-bar-tab ">
        <div class="aui-bar-tab-item"  style="width: 3rem;">
            <div class="aui-bar-tab-label aui-font-size-14">实付款:</div>
        </div>
        <div class="aui-bar-tab-item"  style="width: 3rem;">
            <div class="aui-bar-tab-label aui-font-size-14">￥8.50</div>
        </div>
        <div class="aui-bar-tab-item aui-bg-danger aui-text-white"  style="width: auto;">
            <div  v-on:click="goPay()">立即支付</div>
        </div>
    </footer>
</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-tab.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/aui-toast.js" ></script>
<script type="text/javascript" src="./js/order_detail.js" ></script>
<script type="text/javascript">
    var vltHome = new Vue({
        el:'#app',
        data:{
            submitInfo:{address:""} //提交的信息
        },
        methods: {
            goAddRegion:function(){
                window.location.href = "my_center_detail/my_address.html";
            },
            goData: function () {//我的资料
                window.location.href = "./my_data/my_data.html";
            },
            getAddress:function(){//获取默认地址
                // ajax 请求  获取 获取后台 地址  --> 深圳市南山区高新园
                vltHome.submitInfo.address = "深圳市南山区高新园-测试";
            },
            goPay:function(){//立即支付
                //vltHome.submitInfo 提交对象
                console.log("提交信息：",vltHome.submitInfo);
                if(!vltHome.submitInfo.address){ //输入合法判断
                    alert("请选择收获地址！");
                    return;
                }
                // ajax 提交 数据
                showDefault('success');
            }
        }
    });
    $(function(){
        vltHome.getAddress();
    });
    var tab = new auiTab({
        element:document.getElementById("footer")
    },function(ret){
//	    	console.log(ret);
        if(ret){
//	            document.getElementById("demo").textContent = ret.index;
//	            if(ret.index == 2){
//	            	 window.location.href = "/vlth5/view/progress_check.html";
//	            }else if(ret.index == 3){
//	            	 window.location.href = "/vlth5/view/vlt_org.html";
//	            }
        }
    });

    var topDiv = new auiTab({
        element:document.getElementById("topDiv")
    },function(ret){
//	    	console.log(ret);
    });

    apiready = function(){
        api.parseTapmode();
    }
    var toast = new auiToast();
    function showDefault(type) {
        toast.success({
            title: "支付成功",
            duration: 2000
        });
    }
</script>
</body>
</html>